<extend name="Public:index" />
<block name="main-crumb">
 <li class="active">部门</li>
</block>
<block name="mycss">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/ztree/css/zTreeStyle/zTreeStyle.css" />
<style type="text/css">
	.tip{
	width:280px;padding:10px;text-align:center;background-color:#5cb85c;color:#fff;position:fixed;top:10px;left:50%;z-index:100001;margin-left:-150px;box-shadow:1px 1px 5px #333;-webkit-box-shadow:1px 1px 5px #333;
	}
    .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
</block>
<block name="myscript">
<script type="text/javascript" src="__PUBLIC__/ztree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="__PUBLIC__/ztree/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="__PUBLIC__/ztree/jquery.ztree.exedit.js"></script>
<script>
//$.ajaxSetup({
//    async : false //取消异步
//});
var newCount = 1;
var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: true,
				fontCss: getFontCss
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				//showRenameBtn: showRenameBtn
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				//beforeDrag: beforeDrag,
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				beforeDrop: beforeDrop,
				onRemove: onRemove,
				onRename: onRename,
				onDrop: onDrop,
			}
		};

		var zNodes ={$list};
		var log, className = "dark";
		function beforeDrag(treeId, treeNodes) {
			return false;
		}
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");

			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("确认编辑 “" + treeNode.name + "” 吗？")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				}
			}, 0);
			return false;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			var queren = prompt("输入 yes 确认删除 “" + treeNode.name + "”");
			if ($.trim(queren) =="yes"){
				return true;
			} else {
				return false;
			}
		}
		function onRemove(e, treeId, treeNode) {
			var url = "{:U('removeDeparment')}";
			$.post(url, {id: treeNode.id}, function(res){
				if(res == '1'){
					notify('部门删除成功！');
					window.location.reload();
				} else if(res == '2') {
					notify('此部门下有子部门，不能删除！');
				} else {
					notify('部门删除失败！');
				}
			});

		}
		function beforeDrop(treeId, treeNodes, targetNode, moveType){
			//console.log(treeNodes);
			//console.log(targetNode);

			//return !(targetNode == null || (moveType != "inner" && !targetNode.parentTId));
		}

		function onDrop(event, treeId, treeNodes, targetNode, moveType){
			var url = "{:U('updateDeparment')}";
			var ids = treeNodes.map(function(item, index){return item.id;});
			var pid = treeNodes[0].pId==null ? 0 : treeNodes[0].pId

			$.post(url, {ids: ids, pid: pid}, function(res){
				if(res == '1'){
					notify('部门更新成功！');
					window.location.reload();
				} else {
					notify('部门更新失败！');
				}
			});
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");

			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					notify("部门名称不能为空.");
				}, 0);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
			if(!isCancel){
				var url = "{:U('renameDeparment')}";
				console.log(treeNode);
				$.post(url, {'id': treeNode.id, 'name': treeNode.name, 'pid': treeNode.pId},function(res){
					if (res == '1'){
						notify("部门重命名成功！");
					} else if(res == '2'){
						notify("部门添加成功！");
					} else {
						notify("部门重命名失败！");
					}
				});
			}
		}
		function showRemoveBtn(treeId, treeNode) {
			//var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			//var nodes = zTree.getSelectedNodes();
			//console.log(treeNode.children);
			if(treeNode.children) return false;
			return true;
		}
		function showRenameBtn(treeId, treeNode) {
			return !treeNode.isLastNode;
		}

		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}

		function add(e) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			isParent = e.data.isParent,
			nodes = zTree.getSelectedNodes(),
			treeNode = nodes[0];
			if (treeNode) {
				treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"新部门名称" + (newCount++)});
			} else {
				treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
			}
			if (treeNode) {
				zTree.editName(treeNode[0]);
			} else {
				alert("叶子节点被锁定，无法增加子节点");
			}
		}

		function addRoot(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			treeNode = zTree.addNodes(null, {id:0, pId:0, name:"新部门名称" + (newCount++)});
			if (treeNode) {
				zTree.editName(treeNode[0]);
			}
		}

		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='添加新部门' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				newTreeNode = zTree.addNodes(treeNode, {id:0, pId:treeNode.id, name:"新部门名称" + (newCount++)});
				if (newTreeNode) {
					zTree.editName(newTreeNode[0]);
				}
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function selectAll() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$("#selectAll").bind("click", selectAll);
		});

		function expandNode(e) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = e.data.type;

			if (type == "expandAll") {
				zTree.expandAll(true);
			} else if (type == "collapseAll") {
				zTree.expandAll(false);
			}
		}

		function getFontCss(treeId, treeNode) {
			return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
		}

$(function(){
	$("#expandBtn").on("click", {type:"expandAll"}, expandNode);
	$("#collapseBtn").on("click", {type:"collapseAll"}, expandNode);
	$('#query').on('click', function(){
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var allnodes = zTree.getNodes();

		for( var i1=0, l1=allnodes.length; i1<l1; i1++) {
			allnodes[i1].highlight = false;
			zTree.updateNode(allnodes[i1]);
		}

		var zhi = $.trim($('#catname').val());
		if(zhi){
			var nodeList = zTree.getNodesByParamFuzzy('name', zhi);
			//console.log(nodeList);
			for( var i=0, l=nodeList.length; i<l; i++) {
				nodeList[i].highlight = true;
				zTree.updateNode(nodeList[i]);
			}
		}
	});
});

function notify(msg, func) {
  $( "<div>" )
	.appendTo( document.body )
	.text( msg )
	.addClass( "tip" )
	.position({
	  my: "center top",
	  at: "center top",
	  of: window
	})
	.show({
	  effect: "blind"
	})
	.delay( 1500 )
	.hide({
	  //effect: "blind",
	  duration: "slow",
	  complete: function() {
		  $( this ).remove();
		  if(typeof func != "undefined")
			func.call();
		}
	});
}
</script>
</block>

<block name="main-content">
<div class="panel panel-info">
	<div class="panel-heading">
		<button class="btn btn_primary btn-xs pull-right" type="button" onclick="addRoot()">添加总部门</button>
		<h3 class="panel-title">管理部门</h3>
	</div>
	<div class="panel-body">
		<div>
			<div class="btn-group" role="group" aria-label="...">
				<button type="button" class="btn btn-default" id="expandBtn">全部展开</button>
				<button type="button" class="btn btn-default" id="collapseBtn">全部折叠</button>
			</div>
			<div class="btn-group" role="group" aria-label="...">
			<sform class="form-inline">
				<div class="form-group">
					<div class="input-group">
					  <div class="input-group-addon">部门名称：</div>
					  <input type="text" class="form-control" id="catname" placeholder="部门名称">
					</div>
				  </div>
				<button type="button" class="btn btn_primary" id="query">查询</button>
			</sform>
			</div>
		</div>
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</block>